<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title-item {
            font-size: 30px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div id="app"></div>
<!--引入react核心库-->
<script src="../React-js/react.development.js"></script>
<!--引入reac-dom 用于支持react操作dom-->
<script src="../React-js/react-dom.development.js"></script>
<!--引入babel 用于讲jsx语法转js语法-->
<script src="../React-js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写text/babel  使用babel解析*/

const num = 0

//创建虚拟dom
class DayStatus extends React.Component {
    state = { //固定名称
        isHot: true
    }

    render() {
        const {isHot} = this.state
        return (
            <div>
                天气状态{isHot ? '好热' : '真凉爽'}
                <button onClick={this.updateStatus}>切换状态</button>
            </div>
        )
    }

    /**
     * 点击事件
     */
    updateStatus = () => {
        this.setState({
            isHot: !this.state.isHot //修改状态
        })
    }
}

//渲染虚拟dom到页面
ReactDOM.render(<DayStatus/>, document.getElementById('app'))
</script>
</body>
</html>